<template>
  <el-card body-style="min-height: 86vh">
    <div class="flex items-center mb-4">
      <span class="text-2xl">账号配额数:<span class="font-bold text-red-500">{{annualNum}}条</span></span>
      <!-- <span class="text-2xl ml-12"
        >已充值金额:<span class="font-bold text-red-500">{{totalAnnualRechargeAmount/100}}元</span></span
      > -->
      <!-- <div class="flex items-center ml-12">
        <span class="mr-2 text-2xl">充值数量</span>
        <el-input v-model="num" v-integer-number style="width: 240px" placeholder="单价30元/条" />
        <el-button type="primary" class="ml-2" @click="handlePay">充值</el-button>
      </div> -->
    </div>
    <!-- 搜索 -->
    <el-form :model="searchForm" label-width="80px">
      <el-row :gutter="10">
        <el-col :span="8">
          <el-form-item label="支付时间">
            <el-date-picker
              v-model="searchForm.timeRange"
              type="daterange"
              range-separator="至"
              start-placeholder="开始时间"
              end-placeholder="结束时间"
              value-format="YYYY-MM-DD HH:mm:ss"
            />
          </el-form-item>
        </el-col>
        <el-col :span="10">
          <el-form-item>
            <el-button @click="handleRestSearch()">重置</el-button>
            <el-button type="primary" @click="handleQuery()">搜索</el-button>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
    <el-divider />
    <!-- 刷新按钮 -->
    <div class="flex justify-between">
      <div></div>
      <div>
        <el-button circle @click="handleGetTableList()">
          <template #icon
            ><el-icon> <Refresh /> </el-icon
          ></template>
        </el-button>
      </div>
    </div>
    <!-- 列表显示 -->
    <el-table :data="tableData">
      <el-table-column label="检测站" prop="testStation" align="center" />
      <el-table-column label="类型" prop="repair" align="center">
        <template #default="scope" >
          <el-tag v-if="scope.row.type == 1" size="large" type="primary">配额</el-tag>
          <el-tag v-if="scope.row.type == 0" type="success" size="large">在线支付</el-tag>
        </template>
      </el-table-column>
      <el-table-column label="订单商户号" prop="merchantOrder"  align="center" />
      <el-table-column label="充值条数" prop="num" align="center"/>
      <el-table-column label="支付金额(元)" prop="paymentAmount"  align="center" />
      <el-table-column label="支付状态" prop="payStatus"  align="center">
        <template #default="scope">
          <el-tag v-if="scope.row.payStatus == 0" size="large" type="info">未支付</el-tag>
          <el-tag v-if="scope.row.payStatus == 1" type="success" size="large">已支付</el-tag>
        </template>
      </el-table-column>
      <el-table-column label="支付时间" prop="payTime" align="center" />
    </el-table>
    <el-pagination
      class="flex justify-center mt-2"
      background
      layout="total,prev, pager, next"
      :current-page="currentPage"
      :page-size="limit"
      :total="total"
      @current-change="handleGetTableList"
    />
    <!-- <el-dialog v-model="isShowPay" title="确定充值" width="300" >
      <el-segmented v-model="curType" :options="options" block />
      <div>
        <el-image :src="wx" />
        <span>请在此处替换微信支付二维码</span>
        <div class="flex justify-center mt-4">
          <el-button type="primary" @click="handleConfirmPay">确定</el-button>
          <el-button @click="handleChangePay">取消</el-button>
        </div>
      </div>
    </el-dialog> -->
  </el-card>
</template>
<script setup lang="ts">
import { ref } from "vue";
import { ElMessage } from "element-plus";
import { useInitTable } from "@/hooks/useCommon";
import { getAnnualauditFee, rechargeCost,getAnnualAuditFeeDetails } from "@/api/annualAudit";
import useUserStore from "@/stores/modules/user";
// import wx from "@/assets/image/wx.jpg";
import { ElMessageBox } from "element-plus";
import dayjs from "dayjs";

const userId = (useUserStore().userInfo as any).id!;
const totalAnnualRechargeAmount = ref(0);
const annualNum = ref(0);
// const proxy = getCurrentInstance();
// 表格
// currentPage, limit, total,

const { tableData, searchForm, currentPage,limit, total, handleRestSearch, handleGetTableList } =
  useInitTable({
    searchForm: {
      current:1,
      pageSize:10,
      // startTime:'',
      // endTime:'',
      inspectionId: userId,
      timeRange: []
    },
    isNotRefresh: true,
    getTableList: getAnnualauditFee,
    //limit: 3
  });

handleGetTableList();
getAnnualAuditFeeDetails().then((res) => {
  annualNum.value = (res as any).annualNum;
  totalAnnualRechargeAmount.value = (res as any).totalAnnualRechargeAmount;
});
// 充值
const num = ref(0);
const isShowPay = ref(false);
const handleChangePay = () => {
  isShowPay.value = !isShowPay.value;
};
const handlePay = () => {
  if (!num.value) {
    return ElMessage.error("请输入充值数量");
  }
  handleChangePay();
};

const handleConfirmPay = () => {
  ElMessageBox.confirm(`是否进行${num.value}条充值，总金额为${num.value * 30}元`, "充值提示", {
    confirmButtonText: "确定",
    cancelButtonText: "取消",
    type: "warning"
  }).then(async () => {
    rechargeCost({
      inspectionId: userId,
      num: num.value
    }).then((res) => {
      console.log(res);
      const code = (res as any).code
      if (code === 200) {
        ElMessage.success("充值成功");
        handleChangePay();
        handleGetTableList();
      }
    });
  });
  // tableData.value.push({
  //   repair: "测试检测站",
  //   orderNo: "123456789",
  //   price: (num.value as any) * 30,
  //   status: "待确定",
  //   time: "2020-01-01 12:00:00"
  // });
  // handleChangePay();
};
const curType = ref("转账");
const options = ["微信"];

// 获取年审费用详情

/** 搜索按钮操作 */
function handleQuery() {
  // 将页码重置为1
  searchForm.current = 1;
  // 将用户选择的日期转换为 YYYY-MM-DD 的形式，并赋值给对应的参数名 startTime & endTime
  searchForm.startTime = dayjs(searchForm.timeRange[0]).format("YYYY-MM-DD");
  searchForm.endTime = dayjs(searchForm.timeRange[1]).format("YYYY-MM-DD");
  // 调用获取表格数据的函数
  handleGetTableList();
}

</script>
<style scoped lang="scss"></style>
